<template>
	<view class="container">
		<view class="search_bar">
			<uni-search-bar placeholder="搜索代理商、用户名、手机号、所属地区" @confirm="handleSearch" v-model="searchForm.keywords"
				@cancel="handleCancel" @clear="handleCancel">
			</uni-search-bar>
		</view>
		<view class="">
		</view>
		<view class="total_box">
			共计 <text class="assist_gold">{{ data.total }}</text> 个 </view>
		<view class="scroll_view">
			<scroll-view 
				scroll-y lower-threshold="50" 
				:refresher-enabled="true" 
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh" 
				@scrolltolower="onReachBottom"
				style="height: 100%;"
			>
				<uni-list v-for="(item,index) in data.customerList">
					<uni-list-item :key="index" :title="item.name">
						<template v-slot:header>
							<view class="customer_head">
								<image class="customer_img" src="/static/img/person.png" mode="widthFix"></image>
								<view class="customer_img_icon" :style="{'background-color': item.sex == '女' ? '#f9699c' : '#3262ff'}">
									<uni-icons v-if="item.sex == '女'" custom-prefix="iconfont" type="icon-woman" style="color: #fff;" size="24rpx"></uni-icons>
									<uni-icons v-if="item.sex == '男'"  custom-prefix="iconfont" type="icon-man" style="color: #fff;" size="24rpx"></uni-icons>
								</view>
							</view>
						</template>
						<template v-slot:body>
							<view class="customer_item">
								<view class="customer_name">
									<view class="uni-main-color">{{item.userName}}</view>
									<text class="uni-secondary-color">{{item.sex}} . {{item.age+'岁'}}</text>
								</view>
								<view class="customer_mobile assist_gold">{{item.mobile}}</view>
								<view class="customer_address uni-secondary-color">{{item.homeAddress}}</view>
								<view class="customer_office">
									{{item.officeName?item.officeName:''}} {{item.saleName?item.saleName+'的客户':''}}
								</view>
								<view class="customer_date uni-extra-color">更新于 {{item.updateTime?item.updateTime:''}}</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<uni-load-more 
					:status="loadStatus" 
					:content-text="{
            contentdown: '加载更多',
            contentrefresh: '加载中...',
            contentnomore: '已经到底了'
          }"></uni-load-more>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import userInfoStore from '../../store/modules/user'
	import hx from '@/uni_modules/hxjz-hx'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		loginWithThirdToken,
		getCustomerList
	} from '../../service/apis/user'
	const userInfo = userInfoStore()
	const loadStatus = ref('more')
	const ifStop = ref(false)
	const data = reactive({
		customerList: [],
		total: 0
	})
	const isRefreshing = ref(false)
	const status = ref('')
	const statusOptions = [
		{
			text: "正常",
			value:''
		},
		{
			text: '废弃',
			value: 1
		},
  ]
	const searchForm = reactive({
		keywords: "",
		pageNum: 1,
		pageSize: 20,
		status: ""
	})
	console.log('getSDKVersion: ',hx.getSDKVersion())
	console.log('getAppVersion: ',hx.getAppVersion())
	console.log('getAppCode: ',hx.getAppCode())
	console.log("getUserInfo: ", hx.getUserInfo())
	console.log('getToken: ', hx.getToken())
	console.log('isInHXApp: ', hx.isInHXApp())
	hx.showToast('温馨提示')
	const token = hx.getToken() || '123456788'
	loginWithThirdToken({
			id: token,
			type: '1'
		})
		.then(res => {
			const {
				accessToken,
				offices,
				products
			} = res
			userInfo.setToken(accessToken)
			userInfo.setOffices(offices)
			userInfo.setProducts(products)
			userInfo.setUserInfo(res.userInfo)
		})
	onMounted(() => {
		getList()
	})
	// 查询列表
	function getList() {
		console.log(searchForm)
		uni.showLoading({
		  title: '处理中...',
		  mask: true
		})
		getCustomerList(searchForm).then(res => {
			uni.hideLoading()
			const {
				list,
				isLastPage,
				total
			} = res.data
			data.customerList = data.customerList.concat(list)
			isRefreshing.value = false
			data.total = total
			ifStop.value = isLastPage || (total <= searchForm.pageNum * searchForm.pageSize)
			loadStatus.value = ifStop.value ? 'noMore' : 'more'
		}).catch(()=>{
			uni.hideLoading()
		})
	}
	// 搜索
	function handleSearch(e = {
		value: String
	}) {
		searchForm.pageNum = 1
		data.customerList = []
		ifStop.value = false
		loadStatus.value = 'more'
		getList()
	}
	// 输入取消
	function handleCancel() {
		searchForm.keywords = ''
	}
	// 下拉刷新
	function onRefresh (){
		isRefreshing.value = true
		searchForm.keywords = ''
		handleSearch()
		
	}
	// 上拉加载
	function onReachBottom(){
		if (loadStatus.value !== 'more' || isRefreshing.value) return;								
		loadStatus.value = 'loading';
		if (!ifStop.value) {
		  searchForm.pageNum =  searchForm.pageNum + 1
		  getList()
		}
		uni.stopPullDownRefresh();
	}

</script>

<style lang="scss">
	.container{
	  display: flex;
	  flex-direction: column;
	  height: 100vh;
	}
	.total_box {
		text-align: right;
		padding: 5rpx 30rpx;
		font-size: 26rpx;
	}
	.search_bar{
		padding: 0 10rpx;
		background-color: #fff;
		position: sticky;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: -1PX;
		/* #endif */
		z-index: 9;
	}
	.scroll_view{
	  flex: 1;
	  overflow: hidden;
	}
	.customer_item {
		display: block;
		width: 100%;
	}
	.customer_head{
		position: relative;
	}
	.customer_img{
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 50rpx;
		background: #e7e7e7;
	}
	.customer_img_icon{
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background-color: #f9699c;
		top: 85rpx;
		left: 35rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.customer_name {
		display: flex;
		align-items: center;

		view {
			font-size: 34rpx;
		}

		text {
			font-size: 24rpx;
			padding-left: 20rpx;
		}
	}
	.customer_office {
		padding-top: 10rpx;
		margin-top: 10px;
		display: block;
		font-size: 26rpx;
		border-top: 1rpx solid #d5d5d5;
		color: #444;
	}

	.customer_date {
		margin-top: 10rpx;
		font-size: 26rpx;
	}
</style>